<template>
  <div class="sort_container">
    <div v-for="(item,index) in items"
    :key="index"
    :class="index===selectIndex?'sort_item_container_active':'sort_item_container'"
    @click="onClick(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      items:["综合","销量","价格低到高","价格高到低"],
      selectIndex:0
    }
  },
  methods:{
    onClick(index){
      this.selectIndex = index;
      this.$store.commit("listModule/SORT_LIST",this.items[this.selectIndex])
    }
  }
}
</script>

<style scoped>
.sort_container
{
  width: 100%;
  height: 40px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.sort_item_container
{
  margin: 0 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: gray;
}

.sort_item_container_active
{
  margin: 0 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: blue;
}
</style>